<template>
	<view>
		<view style="background-color: #FFFFFF;">
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<!-- <block slot="content">{{corpCode}}-条码比对</block> -->
				<block slot="content">序列号解绑</block>
			</cu-custom>
		</view>
		<view class="cu-bar bg-white search fixed indexes" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @confirm="getData" v-model="inputVal" type="text" placeholder="请聚焦后扫描条码" :focus="focus"></input>
			</view>
			<view class="action" @click="toScan">
				<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
			</view>
			
		</view>
		
			
		
		<scroll-view v-if="rangeList.length" scroll-y="true" class="indexes" :scroll-with-animation="true" :enable-back-to-top="true"
			:style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]" style="margin-top: 13%;padding-top: 10px;">
			<next-tree v-if="rangeList.length" ref="qiantree" :selectParent="true" labelKey="name" valueKey="id" 
				:multiple="true" :treeData="rangeList"  
				@confirm="onconfirm" />
		</scroll-view>
			
			

	</view>
</template>

<script>
	import nextTree from './tree.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			nextTree
		},
		data() {
			return {
				rangeList:[
					{
						id:10,
						name:'中间箱1',
						code:'11111',
						children:[
							{
								id:1,
								name:'中间箱1',
								
								code:'11111',
								children:[
									{
										id:100,
										code:'11111-1',
										name:'主箱1-01',
									
										children:[
											{
												id:1001,
												code:'11111-1',	
												checked:true,
												name:'主箱1-001',
											},
											{
												id:601,
												code:'11111-1',
												name:'主箱1-002',
											}
										]
									},
									{
										id:501,
										code:'11111-1',
										name:'主箱1-02',
									}
								]
							},
							{
								id:2,
								code:'11111-1',
								name:'中间箱2',
								children:[
									{
										id:600,
										code:'11111-1',
										name:'主箱2-01',
									}
								]
							},
							{
								id:3,
								code:'11111-1',
								name:'中间箱3',
								children:[
									{
										id:700,
										code:'11111-1',
										name:'主箱3-01',
									}
								]
							},
							{
								id:4,
								code:'11111-1',
								name:'中间箱4',
								children:[
									{
										id:800,
										code:'11111-1',
										name:'主箱4-01',
									}
								]
							},
							{
								id:5,
								code:'11111-1',
								name:'中间箱5',
								children:[
									{
										id:900,
										code:'11111-1',
										name:'主箱5-01',
									}
								]
							},
							{
								id:6,
								code:'11111-1',
								name:'中间箱6',
								children:[
									{
										id:1000,
										code:'11111-1',
										name:'主箱6-01',
									}
								]
							},
						]
					}
					
				],
				num:'',
				show:false,
				listArr:[
					{
						check:true,
						name:'方式1  A-B'
					},{
						check:false,
						name:'方式2  A-C'
					},{
						check:false,
						name:'方式3  B-C'
					}
				],
				infoData:{},
				sonlist:[],
				params:{},
				focus: true,
				numfocus: false,
				menuArrow: true,
				CustomBar: this.CustomBar, //滚动定位用
				inputVal: "", //扫码值
				cdata: '', //任务列表
				hwcode: '', //海外仓存货编码
				hwname: '', //海外仓存货名称
				zviewCode: '', //srm存货编码
				srmcinvname: '', //srm存货名称
				posList: [],
				// isCheck: false, //是否可用
				isShowe: false,
				isShowo: false,
				vals: '',
				markCode: '', //装code变量
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		onShow() {

		},
		onLoad(params) {
			// this.params = JSON.parse(params.data)
			// console.log(this.params);
			// for (let i = 0; i < this.params.num; i++) {
			// 	this.sonlist.push({})
			// }
		},
		methods: {
			onconfirm(data){
				console.log(data);
			},
			save(){
				this.focus = false;
				setTimeout(() => {
					this.focus = true;
				}, 500)
				this.zviewCode = '';
				this.sonlist = [];
			},
			xzfs(){
				this.show = true
			},
			confirm(){
				
					let data = {}
					this.listArr.forEach(item=>{
						if(item.check){
							data = {...item}
						}
					})
					if(data.name != this.infoData.name){
						this.zviewCode = '';
						this.sonlist = [];
					}
					
					this.infoData = {
						...data,
						num:this.infoData.num
					}
					
					this.show = false;
					this.focus = false;
					setTimeout(() => {
						this.focus = true;
					}, 500)
			},
			xuanzhe(item){
				this.listArr.forEach(e=>{
					if(e.name == item.name){
						e.check = true
					}else{
						e.check = false
					}
				})
				this.$forceUpdate()
			},
			/** 获取数据 扫描盘点任务单，获取当前盘点人需盘点货位列表*/
			getData() {
				
				// if(!this.infoData.name){
				// 	this.$api.msg('请先选择绑定方式');
				// 	this.show = true
				// 	setTimeout(()=>{
				// 		this.inputVal = '';
				// 	},50)
				// 	return;
				// }
				
				if(!this.infoData.num){
					this.$api.msg('请输入绑定的子箱个数');
					setTimeout(()=>{
						this.inputVal = '';
					},50)
					this.numfocus = false;
					setTimeout(() => {
						this.numfocus = true;
					}, 500)
					return;
				}
				// 中间码
				// if(this.inputVal.startsWith('M')){
					
				// }
				if(!this.zviewCode){
					this.zviewCode = this.inputVal
				}else{
					let arr = [...this.sonlist]
					arr.unshift({
						code:this.inputVal
					})
					this.sonlist = arr.slice(0, this.infoData.num);
				}
				setTimeout(()=>{
					this.inputVal = '';
				},50)
				this.focus = false; // 初始化 第二个输入框focus 属性
				setTimeout(() => {
					this.focus = true; //  第二个输入框获取焦点
				}, 500)
				
				// //1、标准条码前缀：srm码
				// if ((this.inputVal.indexOf("sc") > -1) || (this.inputVal.indexOf("dh") > -1) || (this.inputVal.indexOf(
				// 		"inv") > -1) || (this.inputVal.indexOf("po") > -1)) {
				// 	this.srmviewCode = this.inputVal
				// 	setTimeout(()=>{
				// 		this.inputVal = '';
				// 	},50)
				// 	this.getPostData();
				// 	return;
				// } else {
				// 	//2、客户的标签前缀（不是我们的标签就是客户的标签）：海外码
				// 	this.hwcode = this.inputVal
				// 	setTimeout(()=>{
				// 		this.inputVal = '';
				// 	},50)
				// 	this.getPostData();
				// 	return;
				// }
				
				// uni.request({
				// 	url: this.serverURL_a + `/barcode/decode/checkBarCode`,
				// 	data: {
				// 		barCode: this.inputVal,
				// 		__sid: this.userInfo.sessionid,
				// 	},
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
				// 	},
				// 	method: 'POST',
				// 	success: function(data) {
				// 		let res = data.data
				// 		if(res.result == 'true'){
				// 			this.srmviewCode = this.inputVal
				// 		}else{
				// 			this.hwcode = this.inputVal
				// 		}
				// 		setTimeout(()=>{
				// 			this.inputVal = '';
				// 		},50)
				// 		this.getPostData();
				// 	}.bind(this),
				// 	fail: function() {
				// 		this.$api.msg('无法连接服务，请联系管理');
				// 		this.inputVal = ''
				// 		return;
				// 	}.bind(this),
				// })
				
				
			},

			/** 标准标签信息*/
			getPostData() {
				setTimeout(()=>{
					this.inputVal = '';
				},50)
				if (!this.srmviewCode || !this.hwcode) {
					this.$api.msg("请继续另一个码!");
					return;
				} else {
					uni.request({
						url: this.serverURL_a + '/so/App/checkSkuAndCode',
						data: {
							code: this.markCode,
							__sid: this.userInfo.sessionid,
							srmCode: this.srmviewCode,
							cusCode: this.hwcode,
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
						},
						method: 'POST',
						success: function(res) {
							var result = res.data;
							if (result.result == 'true') {
								console.log("成功")
								//提示成功声
								console.log("=====testClick=====");
								let src = '../../static/cg1.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								this.cleanData();
							} else if (result.result == '1003') {
								console.log('end');
								this.$api.msg(result.message);
								console.log(result.message)
								console.log("SKU不存在！")
								console.log("=====testClick=====");
								let src = '../../static/bcz.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								this.cleanData();
								return;
							} else if (result.result == '1004') {
								this.$api.msg(result.message);
								console.log("请勿重复扫描！")
								console.log("=====testClick=====");
								let src = '../../static/chongfu.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								this.focus = true;
								this.cleanData();
								return;
							} else if (result.result == '1005') {
								this.$api.msg(result.message);
								console.log("数量超出！")
								console.log(result.message)
								console.log("=====testClick=====");
								let src = '../../static/slcc.mp3';
								//实例化声音  
								const Audio = uni.createInnerAudioContext();
								Audio.autoplay = true;
								Audio.src = src; //音频地址  
								Audio.play(); //执行播放  
								Audio.onError((res) => {
									console.log(res.errMsg);
									console.log(res.errCode);
								});
								Audio.onPause(function() {
									console.log('end');
									Audio.destroy();
								});
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								setTimeout(() => {
									this.cleanData();
								}, 500)
								return;
							} else {
								this.$api.msg(result.message);
								console.log("扫码失败！")
								console.log(result.message)
								this.scSb();
								setTimeout(()=>{
									this.inputVal = '';
								},50)
								setTimeout(() => {
									this.cleanData();
								}, 500)
								return;
							}
						}.bind(this),
						fail: function() {
							this.$api.msg('服务已停止,请稍后再试');
							setTimeout(() => {
								this.inputVal = '';
								this.cleanData();
							}, 500)
							return;
						}.bind(this),
					});
				}
			},
			/** 扫码失败*/
			scSb() {
				console.log("=====testClick=====");
				let src = '../../static/smsb.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			/** 扫码成功*/
			scCg() {
				console.log("=====testClick=====");
				let src = '../../static/smcg.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			/** 清空数据 */
			cleanData() {
				this.srmviewCode = '';
				this.hwcode = '';
				this.focus = true;
			},
			/** 扫码*/
			toScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						var rdata = res.result;
						this.inputVal = rdata;
						setTimeout(function() {
							this.getData();
							this.inputVal = '';
							this.focus = true;
						}.bind(this), 100);
					}.bind(this)
				});
			},
		}
	}
</script>

<style>
	
	
	
	.confirm-btn {
		padding: 0 38upx;
		margin: 0;
		height: 76upx;
		line-height: 76upx;
		font-size: $font-base + 2upx;
		background: $uni-color-primary;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.indexes {
		font-size: 18px;
	}

	/* 底部栏 */
	.action-section {
		position:fixed;
		left: 75%;
		bottom:30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,.9);
		border-radius: 40upx;
	}
	
	.bg {
		 z-index: 9999;
		 background:rgba(0,0,0,.4);
		 position:fixed;
		 left:0;
		 right:0;
		 top:0;
		 bottom:0;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
</style>